/**
 * KPI 看板模块主控制器
 * */

/**
 * API 接口
 *
 * getAction 获取下拉选项菜单
 * postAction 获取看板数据
 * */
import { getAction, postAction } from '@/api/manage';

/**
 * 图表模板
 *
 * barMain 收入 混合图表
 * barMain2 销售 混合图表
 * barMain3 销售 混合图表 床位使用率
 *
 * barContribution 贡献度 柱图
 * barContribution2 贡献度 柱图 瀑布流
 * pieDepart 园区收入占比 玫瑰图
 * pieTrade 业态收入占比 饼图
 *
 * tableCommon 表头通用配置
 * */
import {
  barMain, barMain2, barMain3,
  barContribution, barContribution2,
  pieDepart, pieTrade, tableCommon
} from './chart.tem';

/**
 * 图表通用服务
 *
 * getData1 混合图表
 * getData2 贡献度 柱图
 * getData2_2 贡献度 柱图 瀑布流
 * getData3 占比 玫瑰图
 * getData4 占比 饼图
 *
 * tabDataSource 表格数据 通用
 * tabDataSource2 表格数据 销售
 * tabDataSource3 表格数据 医院床位使用率
 * */
import {
  getData1, getData2, getData2_2, getData3, getData4,
  tabDataSource, tabDataSource2, tabDataSource3
} from './chart.service';




export default {
  name: 'screenkpi',

  components: {},

  data() {
    let _tableCommon = tableCommon();

    return {
      loading: true,

      /* 年月下拉菜单 */
      yearMonthList: {
        arr: [],        // 可选择的年月列表
        value: {}       // 已选年月，默认数组第 0 个
      },

      /* 选择园区 */
      departInfo: {
        arr: [],
        value: {}
      },

      /* 选择维度 */
      dimension: {
        arr: [],
        value: {}
      },

      /* 需要默认展开的主面板 */
      autoKey: 'income',    // 默认展开的手风琴面板，每次只允许展开一项
      // 可展开多项
      activeKey: [
        'income-overview', 'income-detail-indep', 'income-detail-nurse', 'income-detail-hospital',
        'ebitda-overview', 'ebitda-detail-indep', 'ebitda-detail-nurse', 'ebitda-detail-hospital',
        'sale-overview', 'sale-detail-indep', 'sale-detail-nurse', 'sale-detail-hospital',
        'whole-overview',
      ],

      /* 图表的 ID，获取 dom 节点 */
      chartsMap: {
        /**
         * 配置说明
         *
         * title        标记用，可随意命名，不会影响页面
         * id           对应 html 页面中图表的 id 名称（具有唯一性）
         * tem          初始化图表参数
         * dataKey      对应后台接口返回的数据字段
         * tableInfo    有对应的表格
         * getChartOpt  对应组合图表数据的方法
         *
         * isDetail     详情的 data 在更深的地方
         * */

        // 收入
        income: [
          { title: '概览-收入', id: 'income-bar-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, tableInfo: 'incomeOverview' },
          { title: '概览-贡献度', id: 'income-bar-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2 },
          { title: '概览-园区收入占比', id: 'income-pie-depart', tem: pieDepart, dataKey: 'data3', getChartOpt: getData3 },
          { title: '概览-业态收入占比', id: 'income-pie-trade', tem: pieTrade, dataKey: 'data4', getChartOpt: getData4 },

          { title: '详情-独立收入-概览', id: 'income-bar-detail-indep-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[0].data1', tableInfo: 'incomeDetailIndep' },
          { title: '详情-独立收入-贡献度', id: 'income-bar-detail-indep-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[0].data2' },
          { title: '详情-独立收入-园区收入占比', id: 'income-bar-detail-indep-depart', tem: pieDepart, dataKey: 'data3', getChartOpt: getData3, isDetail: 'child[0].data3' },

          { title: '详情-护理收入-概览', id: 'income-bar-detail-nurse-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[1].data1', tableInfo: 'incomeDetailNurse' },
          { title: '详情-护理收入-贡献度', id: 'income-bar-detail-nurse-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[1].data2' },
          { title: '详情-护理收入-园区收入占比', id: 'income-bar-detail-nurse-depart', tem: pieDepart, dataKey: 'data3', getChartOpt: getData3, isDetail: 'child[1].data3' },

          { title: '详情-医院收入-概览', id: 'income-bar-detail-hospital-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[2].data1', tableInfo: 'incomeDetailHospital' },
          { title: '详情-医院收入-贡献度', id: 'income-bar-detail-hospital-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[2].data2' },
          { title: '详情-医院收入-园区收入占比', id: 'income-bar-detail-hospital-depart', tem: pieDepart, dataKey: 'data3', getChartOpt: getData3, isDetail: 'child[2].data3' },
        ],

        // EBITDA
        EBITDA: [
          { title: '概览-EBITDA', id: 'ebitda-bar-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, tableInfo: 'ebitdaOverview' },
          { title: '概览-贡献度', id: 'ebitda-bar-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2 },
          { title: '概览-园区 EBITDA 占比', id: 'ebitda-pie-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2 },
          { title: '概览-业态 EBITDA 占比', id: 'ebitda-pie-trade', tem: barContribution2, dataKey: 'data4', getChartOpt: getData2_2 },

          { title: '详情-独立 EBITDA-概览', id: 'ebitda-bar-detail-indep-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[0].data1', tableInfo: 'ebitdaDetailIndep' },
          { title: '详情-独立 EBITDA-贡献度', id: 'ebitda-bar-detail-indep-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[0].data2' },
          { title: '详情-独立 EBITDA-园区收入占比', id: 'ebitda-bar-detail-indep-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2, isDetail: 'child[0].data3' },

          { title: '详情-护理 EBITDA-概览', id: 'ebitda-bar-detail-nurse-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[1].data1', tableInfo: 'ebitdaDetailNurse' },
          { title: '详情-护理 EBITDA-贡献度', id: 'ebitda-bar-detail-nurse-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[1].data2' },
          { title: '详情-护理 EBITDA-园区收入占比', id: 'ebitda-bar-detail-nurse-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2, isDetail: 'child[1].data3' },

          { title: '详情-医院 EBITDA-概览', id: 'ebitda-bar-detail-hospital-main', tem: barMain, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[2].data1', tableInfo: 'ebitdaDetailHospital' },
          { title: '详情-医院 EBITDA-贡献度', id: 'ebitda-bar-detail-hospital-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[2].data2' },
          { title: '详情-医院 EBITDA-园区收入占比', id: 'ebitda-bar-detail-hospital-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2, isDetail: 'child[2].data3' },
        ],

        // 销售
        sale: [
          { title: '销售概览', id: 'sale-bar-main', tem: barMain2, dataKey: 'data1', getChartOpt: getData1, tableInfo: 'saleOverview' },
          { title: '概览-贡献度', id: 'sale-bar-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2 },
          { title: '概览-园区占比', id: 'sale-pie-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2 },
          { title: '概览-业态占比', id: 'sale-pie-trade', tem: barContribution2, dataKey: 'data4', getChartOpt: getData2_2 },

          { title: '详情-独立销售-概览', id: 'sale-bar-detail-indep-main', tem: barMain2, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[0].data1', tableInfo: 'saleDetailIndep' },
          { title: '详情-独立销售-贡献度', id: 'sale-bar-detail-indep-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[0].data2' },
          { title: '详情-独立销售-园区收入占比', id: 'sale-bar-detail-indep-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2, isDetail: 'child[0].data3' },

          { title: '详情-护理销售-概览', id: 'sale-bar-detail-nurse-main', tem: barMain2, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[1].data1', tableInfo: 'saleDetailNurse' },
          { title: '详情-护理销售-贡献度', id: 'sale-bar-detail-nurse-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[1].data2' },
          { title: '详情-护理销售-园区收入占比', id: 'sale-bar-detail-nurse-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2, isDetail: 'child[1].data3' },

          { title: '详情-医院销售-概览-床位使用率', id: 'sale-bar-detail-hospital-main', tem: barMain3, dataKey: 'data1', getChartOpt: getData1, isDetail: 'child[2].data1', tableInfo: 'saleDetailHospital' },
          { title: '详情-医院销售-贡献度', id: 'sale-bar-detail-hospital-contribution', tem: barContribution2, dataKey: 'data2', getChartOpt: getData2_2, isDetail: 'child[2].data2' },
          { title: '详情-医院销售-园区收入占比', id: 'sale-bar-detail-hospital-depart', tem: barContribution2, dataKey: 'data3', getChartOpt: getData2_2, isDetail: 'child[2].data3' },
        ],

        // 整体 融合与业态维度
        whole: [
          { title: '整体收入', id: 'whole-income', tem: barMain, dataKey: 0, getChartOpt: getData1, tableInfo: 'incomeOverview' },
          { title: '整体 EBITDA', id: 'whole-EBITDA', tem: barMain, dataKey: 1, getChartOpt: getData1, tableInfo: 'ebitdaOverview' },
          { title: '整体销售', id: 'whole-sale', tem: barMain2, dataKey: 2, getChartOpt: getData1, tableInfo: 'saleOverview' },

          { title: '独立收入', id: 'indep-income', tem: barMain, dataKey: 3, getChartOpt: getData1, tableInfo: 'incomeDetailIndep' },
          { title: '独立 EBITDA', id: 'indep-EBITDA', tem: barMain, dataKey: 4, getChartOpt: getData1, tableInfo: 'ebitdaDetailIndep' },
          { title: '独立销售', id: 'indep-sale', tem: barMain2, dataKey: 5, getChartOpt: getData1, tableInfo: 'saleDetailIndep' },

          { title: '护理收入', id: 'nurse-income', tem: barMain, dataKey: 6, getChartOpt: getData1, tableInfo: 'incomeDetailNurse' },
          { title: '护理 EBITDA', id: 'nurse-EBITDA', tem: barMain, dataKey: 7, getChartOpt: getData1, tableInfo: 'ebitdaDetailNurse' },
          { title: '护理销售', id: 'nurse-sale', tem: barMain2, dataKey: 8, getChartOpt: getData1, tableInfo: 'saleDetailNurse' },

          { title: '医院收入', id: 'hospital-income', tem: barMain, dataKey: 9, getChartOpt: getData1, tableInfo: 'incomeDetailHospital' },
          { title: '医院 EBITDA', id: 'hospital-EBITDA', tem: barMain, dataKey: 10, getChartOpt: getData1, tableInfo: 'ebitdaDetailHospital' },
          { title: '医院床位使用情况', id: 'hospital-bed', tem: barMain3, dataKey: 11, getChartOpt: getData1, tableInfo: 'saleDetailHospital' },
        ]
      },

      /* 已经被渲染过的图表，用来做自适应 */
      chartsDomMap: {},

      /* 表格参数 */
      tableCommon: {
        scroll: _tableCommon.scroll,
        columns: _tableCommon.columns,
      },
      tableInfo: {
        incomeOverview: tabDataSource(),          // 收入-概览表格
        incomeDetailIndep: tabDataSource(),       // 收入-详情-独立收入表格
        incomeDetailNurse: tabDataSource(),       // 收入-详情-护理收入表格
        incomeDetailHospital: tabDataSource(),    // 收入-详情-医院收入表格

        ebitdaOverview: tabDataSource(),          // EBITDA-概览表格
        ebitdaDetailIndep: tabDataSource(),       // EBITDA-详情-独立收入表格
        ebitdaDetailNurse: tabDataSource(),       // EBITDA-详情-护理收入表格
        ebitdaDetailHospital: tabDataSource(),    // EBITDA-详情-医院收入表格

        saleOverview: tabDataSource2(),           // 销售-概览表格
        saleDetailIndep: tabDataSource2(),        // 销售-详情-独立销售表格
        saleDetailNurse: tabDataSource2(),        // 销售-详情-护理销售表格
        saleDetailHospital: tabDataSource3(),     // 销售-详情-医院床位使用率表格
      },

      /* 源数据 */
      sourceData: []
    }
  },

  created() { this.getAction(); },

  mounted() {
    this.$nextTick(() => {
      // 监听 window 窗口变化，自适应图表
      window.addEventListener('resize', this.autoChart);
    });
  },

  methods: {

    /* 监听考核日期的改变 */
    changeDate(code) {
      let arr = this.yearMonthList.arr;
      this.yearMonthList.value = arr.find((item) => { return (item.value === code); });
      this.postAction();
    },

    /* 监听园区的改变 */
    departChange(val) {
      let arr = this.departInfo.arr;
      this.departInfo.value = arr.find((item) => { return item.value === val; });

      this.disposeChart();
      this.postAction();
    },

    /* 监听维度的改变 */
    dimensionChange(val) {
      let arr = this.dimension.arr;
      this.dimension.value = arr.find((item) => { return item.value === val; });

      /* 如果当前选中了 融合与业态 */
      if (this.dimension.value.value === 'fuseAndBiz') {
        this.autoKey = 'whole';
      } else {
        this.autoKey = 'income';
      }

      this.disposeChart();
      this.postAction();
    },

    /* 销毁图表 */
    disposeChart() {
      for (let key in this.chartsDomMap) {
        this.chartsDomMap[key].dispose();
        delete this.chartsDomMap[key];
      }
    },

    /* 监听手风琴面板的切换 */
    changePanel(key) {
      let t = this;
      if (!key) { return; }

      t.autoKey = key;
      setTimeout(() => { this.autoChart('dataChange'); }, 1000);
    },

    /* 监听折叠面板展开隐藏 */
    changePanels() {
      setTimeout(() => { this.autoChart('dataChange'); }, 1000);
    },

    /* 更新图表数据 change | 大小自适应 resize */
    autoChart(str) {
      let t = this;
      let arr = [];

      /* 单独判断当前是否是 融合与业态 维度 */
      if (t.dimension.value.value === 'fuseAndBiz') {
        arr = t.chartsMap.whole;
      } else {
        arr = t.chartsMap[t.autoKey];
      }

      for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        let id = item.id;
        let dom = document.getElementById(id);

        if (dom) {
          /* 图表数据改变 */
          if (str === 'dataChange') {
            t.chartsDomMap[id] = this.$echarts.init(dom);
            t.chartsDomMap[id].setOption(t.getChartOption(item));
            t.chartsDomMap[id].resize();
          } else {
            /* 图表大小自适应 */
            t.chartsDomMap[id] && t.chartsDomMap[id].resize();
          }
        }
      }
    },

    /* 返回图表参数 增长与价值维度 */
    getChartOption(item) {
      let t = this;

      // ind 对应后台返回的数组项（因为后台返回的数组有 3 项）
      let map = {
        income: { title: '收入', ind: 0 },
        EBITDA: { title: 'EBITDA', ind: 1 },
        sale: { title: '销售', ind: 2 },
      }

      /**
       * ind 表示当前用接口里面的哪一个
       * data 从接口里面通过 ind 找到的数据
       * */
      let ind = 0, data = {};

      let option = item.tem && item.tem();      // 获取图表模板
      let sourceData = t.sourceData;            // 从接口获取到的源数据

      if (map[t.autoKey]) { ind = map[t.autoKey].ind; }

      if (!item.isDetail) {
        if (t.dimension.value.value === 'fuseAndBiz') {
          data = sourceData[item.dataKey];
        } else {
          data = sourceData[ind][item.dataKey];
        }
      } else {
        data = eval('sourceData[ind].' + item.isDetail);
      }

      /* 组装图表数据 */
      option = item.getChartOpt(data, option);

      /* 需要渲染的表格数据 */
      if (item.tableInfo) {
        let dataSource = t.tableInfo[item.tableInfo];
        dataSource.forEach((item) => {
          Object.assign(item, eval('data.' + item.seriesKey));
        });

        /* 整体更新，不然数据虽然有改变，因为是 2 级数据结构，不整体更新的话 页面表格就没有变化 */
        let tableInfo = JSON.parse(JSON.stringify(t.tableInfo));
        t.tableInfo = {};
        t.tableInfo = tableInfo;
      }

      return option;
    },

    /* 获取看板数据 */
    postAction() {
      let t = this;
      let data = {
        indexYearMonth: t.yearMonthList.value.value,
        indexDepartGroup: t.departInfo.value.value,
        dimensionality: t.dimension.value.value
      }

      t.loading = true;
      postAction('/api/pms/kpiView', data).then((res) => {
        t.loading = false;
        t.sourceData = res.result;
        t.autoChart('dataChange');
      }).catch((error) => {
        t.loading = false;
        t.$message.error(error.message);
      });
    },

    /* 获取看板的 3 项查询条件的选项 */
    getAction() {
      let t = this;
      getAction('/api/pms/kpiCondition').then((res) => {
        let result = res.result;

        if (!res.success) {
          t.$message.warning(res.message);
          return;
        }

        /* 考核期 */
        t.yearMonthList.arr = result.indexYearMonth;            // 可选年份下拉选项
        t.yearMonthList.value = result.indexYearMonth[0];       // 默认第 0 项

        /* 园区 */
        t.departInfo.arr = result.indexDepartGroupList;
        t.departInfo.value = result.indexDepartGroupList[0];

        /* 维度 */
        t.dimension.arr = result.dimensionalityList;
        t.dimension.value = result.dimensionalityList[0];

        setTimeout(() => { t.postAction(); });
      }).catch((error) => {
        t.$message.error(error.message);
      });
    }
  }
}


